<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body id="b">

<div class="x">我爱祖国</div>
<div class="x">我爱祖国</div>
<div name="aizuguo" class="x">我爱祖国</div>
<div class="x">我爱祖国</div>
<div class="x">我爱祖国</div>

<div class="y x">我爱祖国1</div>
<div name="aizuguo" class="y">我爱祖国2</div>
<div class="y">我爱祖国3</div>
<div class="y">我爱祖国4</div>
<div id="d" class="y">我爱祖国5</div>


<script>

    // document.getElementById('b').style.backgroundColor = 'red';
    // document.body可以直接选择body节点
    // document.body.style.backgroundColor = 'red';



    // querySelector 可以使用css的选择器写法。querySelector永远只选择符合条件的第一个对象
    // var div = document.querySelector('.x');
    // console.log(div);

    // querySelectorAll 使用规则和querySelector一样，不过它会选择所有符合条件的对象，返回值是复数
    // var divs = document.querySelectorAll('#d');
    // console.log(divs);

    /**
     * ===================================================
     */

    // getElementsByTagName 根据标签名称进行选择对象， 结果为多个
    // var div = document.getElementsByTagName('div');

    // console.log(div)

    // div[0].style.color = 'red'
    // div[1].style.color = 'red'


    // for (var i in div){
    //
    //     // console.log(i)
    //     if (typeof div[i] == 'object'){
    //         div[i].style.color = 'red'
    //     }
    //     // div[i].style.color = 'red'
    //
    // }


    // for (var i = 0; i < div.length; i++){
    //     div[i].style.color = 'blue'
    // }

    /**
     * ===================================================
     */

    // 根据class名称进行选择节点对象 也是复数
    // var div = document.getElementsByClassName('x');
    // console.log(div);
    /**
     * ===================================================
     */
    //通过标签的name属性进行选择节点 也是复数
    // var div = document.getElementsByName('aizuguo');
    // console.log(div);




</script>

</body>
</html>